<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>棒主妇首页</title>
    <link rel="stylesheet" href="../jquery-mobile/theme/bzf-default.min.css"/>
    <link rel="stylesheet" href="../jquery-mobile/theme/bzf-default-asset.css"/>
    <link rel="stylesheet" href="../jquery-mobile/css/jquery.mobile.structure-1.3.1.min.css">
    <link rel="stylesheet" href="../css/mobile.css"/>
    <script>
        var WEB_ROOT_HOST = 'http://192.168.2.189/';
        var WEB_ROOT_BASE = '/PHPStorm/bzfshop/src/mobile/Public';
        var WEB_ROOT_BASE_RES = '/PHPStorm/bzfshop/src/mobile/Theme/Mobile/';
        var FLASH_MESSAGE_STR = '';
        var USER_NAME_DISPLAY = '';
    </script>
    <script src="../jquery-mobile/js/jquery-1.9.1.min.js"></script>
    <script src="../jquery-mobile/js/jquery.lazyload.js"></script>
    <script src="../js/mobile.js"></script>
    <script src="../jquery-mobile/js/jquery.mobile-1.3.1.min.js"></script>
    <script src="../jquery-mobile/plugin/route/jquery.mobile.router.min.js"></script>
</head>
<body>

<!-- 主 Page -->
<div data-role="page" class="ui-responsive-panel" data-title="商品购买">

    <!-- Page Header -->
    <div data-role="header" data-theme="f">

        <div data-role="controlgroup" class="ui-btn-left" data-type="horizontal" data-mini="true">
            <a href="#goods_category_panel" data-role="button" data-icon="grid">商品分类</a>
        </div>

        <span class="ui-title"/>

        <div data-role="controlgroup" class="ui-btn-right" data-type="horizontal" data-mini="true">
            <a href="#user_register_popup" data-rel="popup" data-position-to="window" data-transition="flip"
               data-role="button" data-icon="plus">注册</a>
            <a href="#user_login_popup" data-rel="popup" data-position-to="window" data-transition="flip"
               data-role="button" data-icon="check">登陆</a>
        </div>

    </div>
    <!-- /Page Header -->

    <!-- Page 主体内容 -->
    <div data-role="content">

        <!-- 商品标题 -->
        <h4>这里是商品的标题</h4>
        <!-- /商品标题 -->

        <!-- 商品头图和价格 -->
        <div class="ui-grid-a">

            <!-- 头图 -->
            <div class="ui-block-a">

                <a id="goods_view_head_image_thumbnail"
                   data-rel="popup" href="#goods_view_head_image_popup" data-transition="pop">
                    <img src="../img/lazyload_placeholder_298_223.png"/>
                </a>

                <div data-role="popup" id="goods_view_head_image_popup" class="photopopup"
                     data-overlay-theme="a" data-corners="false" data-tolerance="30,15">
                    <a href="#" data-rel="back" data-role="button" data-theme="a"
                       data-icon="delete" data-iconpos="notext" class="ui-btn-right">关闭</a>
                    <img src="../img/lazyload_placeholder_460_344.png" alt="商品头图">
                </div>

            </div>
            <!-- 头图 -->

            <!-- 商品价格信息 -->
            <div class="ui-block-b" style="padding: 10px 10px;">
                <div class="ui-grid-a">
                    <div class="ui-block-a" style="font-weight: bold;">原价</div>
                    <div class="ui-block-b" style="text-decoration: line-through;color:blue;">
                        ￥200
                    </div>
                    <div class="ui-block-a" style="font-weight: bold;">现价</div>
                    <div class="ui-block-b" style="color:red;font-weight: bold;">￥100</div>
                </div>
                <br/>
            </div>
            <!-- 商品价格信息 -->

            <div class="ui-block-a">
                <a data-role="button" data-icon="arrow-l" data-rel="back" href="#" data-theme="b">返回详情</a>
            </div>
            <div class="ui-block-b">
                <a data-role="button" href="tel:01083487737" data-theme="f">客服电话</a>
            </div>

        </div>
        <!-- 商品头图和价格 -->

        <!-- 购买商品的选择和数量 -->
        <form data-ajax="false" method="POST" action="{{bzf_make_url controller='/User/Login'}}">

            <div style="padding:10px 20px;">

                <label for="goods_choose_idlist">规格选择</label>
                <select name="goods_choose_idlist" data-native-menu="false">
                    <option value="10">红色</option>
                    <option value="15">绿色</option>
                </select>

                <label for="goods_choose_buycount">购买数量</label>
                <input type="range" name="goods_choose_buycount" value="1" min="1" max="10" step="1"
                       required="required"
                       data-highlight="true">

                <label for="consignee">收件地址</label>
                <input type="text" name="address" required="required"
                       placeholder="请按照省、市、区方式填写，例如“浙江省杭州市萧山区 xxx大街 xxx号楼 111号"/>

                <label for="consignee">收件人</label>
                <input type="text" name="consignee" required="required" placeholder="在这里填写收件人姓名"/>

                <label for="mobile">手机号</label>
                <input type="text" name="mobile" required="required" pattern="1([0-9]{10})"
                       placeholder="手机号用于快递联系您给您派件"/>

                <label for="postscript">订单留言</label>
                <textarea type="text" name="postscript" placeholder="在这里写你的额外要求"></textarea>

                <br/>
                <button type="submit" data-theme="e">确认购买</button>

            </div>

        </form>
        <!-- 购买商品的选择和数量 -->

    </div>
    <!-- /Page 主体内容 -->


</div>
<!-- /主 Page -->

</body>
</html>
